<template>
  <div class="case">
    <banner img="../assets/img/bgtop.jpg" />
    <div class="case-product">
      <div class="case-product-content">
        <p class="product-title">{{ caseIdList.title }}</p>
        <!-- 使用 v-html 渲染富文本内容 -->
        <div class="product-content" v-html="caseIdList.content"></div>
        <p class="product-time">{{ caseIdList.createTime }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "../components/Banner";
import DOMPurify from "dompurify";

export default {
  components: {
    Banner,
  },
  data() {
    return {
      pid: 0,
      caseIdList: {},
    };
  },
  created() {
    this.pid = this.$route.params.id;
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$http
        .get(`case/id/${this.pid}`)
        .then((response) => {
          this.caseIdList = response.data[0];
          this.dateFormat(this.caseIdList);
          this.caseIdList.content = DOMPurify.sanitize(this.caseIdList.content);
          this.caseIdList.content = this.processImagesInContent(
            this.caseIdList.content
          );
        })
        .catch(() => {
        });
    },
    processImagesInContent(content) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(content, "text/html");
      const images = doc.querySelectorAll("img");
      images.forEach((img) => {
        img.style.maxWidth = "100%";
        img.style.height = "auto";
      });
      return doc.body.innerHTML;
    },
    dateFormat(e) {
      let t = new Date(e.createTime);
      e.createTime =
        t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
    },
  },
};
</script>

<style lang="scss" scoped>
.case {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &-product {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    &-content {
      width: 70%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 50px 0;
      img {
        width: 100%;
      }
      .product-title {
        font-weight: bold;
        font-size: 22px;
        color: #e13834;
        padding: 10px 0;
      }
      .product-content {
        font-size: 17px;
        padding: 10px 0;
      }
      .product-time {
        align-self: flex-end;
      }
    }
    @media screen and (max-width: 1000px) {
      &-content {
        width: 88%;
      }
    }
  }
}
</style>
